<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
	<div id="app">
		<div class="filter"></div>
		<div class="popup" ref='add'>
			<div class="popup_title">添加物品</div>
			<div class="popup_cont">
				<p>物品名称：</p>
				<input type="text" class="add_item_name" v-model="add_name" />
				<p>单价 （元）：</p>
				<input type="text" class="add_item_unitPrice" v-model="add_unitPrice" />
				<p>单位：</p>
				<input type="text" class="add_item_company" v-model="add_company" />
				<p>数量：</p>
				<input type="text" class="add_item_number" v-model="add_number" />
				<p>库存预测：</p>
				<input type="text" placeholder="10" class="add_item_forecast" v-model="add_forecast" />
				<span class="cancel" @click="close">取消</span>
				<span class="submit" @click="submit">提交</span>
				
			</div>
		</div>
		<div class="popup2" ref='modify'>
			<div class="popup_title">修改信息</div>
			<div class="popup_cont">
				<p>物品名称：</p>
				<input type="text" class="update_item_name" v-model="update_name" />
				<p>单价 （元）：</p>
				<input type="text" placeholder="0.00" class="update_item_unitPrice" v-model="update_unitPrice" />
				<p>单位：</p>
				<input type="text" class="update_item_company" v-model="update_company" />
				<p>数量：</p>
				<input type="text" placeholder="0" class="update_item_number" v-model="update_number" />
				<p>库存预测：</p>
				<input type="text" placeholder="0" class="update_item_forecast" v-model="update_forecast" />
				<span class="cancel" @click="close1">取消</span>
				<span class="submit2" @click="submit1">提交</span>
			</div>
		</div>
		<div class="header">
			<div class="header_title">查询条件</div>
			<div class="header_cont">
				<span>物品名称</span>
				<input type="text" class="name" v-model="query_name" />
				<span>库存状态</span>
				<select class="state" v-model="query_state">
					<option value=""></option>
					<option value="充足">充足</option>
					<option value="待补货">待补货</option>
				</select>
				<span class="query" @click="query">查询</span>
			</div>
		</div>
		<div class="functionalArea">
			<div class="addTo"  @click="display">
				<i class="icon_addto"></i>
				<span class="zeng">新增</span>
			</div>
			<div class="modify" @click="addItm">
				<i class="icon_modify"></i>
				<span class="gai">修改</span>
			</div>
			<div class="delete" @click="deleteItem">
				<i class="icon_delete"></i>
				<span class="shan">删除</span>
			</div>
		</div>
		<div class="data">
			<div class="title">
				<div><input type="checkbox" v-model="ackAll" @change="changeAll"></div>
				<div>物品ID</div>
				<div>物品名称</div>
				<div>单价</div>
				<div>单位</div>
				<div>数量</div>
				<div>库存状态</div>
				<div>库存预测</div>
				<div>创建时间</div>
				<div>修改时间</div>
			</div>
		</div>
		<div class="dataDetails">
			<form>
				<table class="surface">
					<tr v-for="item in list" :key='item.item_id'>
						<td><input type="checkbox" v-model="arr" :value="item.item_id" @click="select(item)" @change="changeOne" /></td>
						<td>{{ item.item_id }}</td>
						<td>{{ item.item_name }}</td>
						<td>{{ item.item_price }}</td>
						<td>{{ item.item_format }}</td>
						<td>{{ item.item_total }}</td>
						<td>{{ item.item_state }}</td>
						<td>{{ item.item_inventory }}</td>
						<td>{{ item.create_time }}</td>
						<td>{{ item.update_time }}</td>
					</tr>
				</table>
			</form>
		</div>
		<div class="setUp">
				<div class="left">
					总共{{ total }}条数据 每页显示
					<select class="select_page" v-model="size" @click="changeSize()">
						<option value="5">5</option>
						<option value="10" selected>10</option>
						<option value="15">15</option>
					</select>
				</div>
				<!-- <h3>{{ size }}</h3> -->
				<div class="right">
					<div class="prev"> < </div>
					<ul class="list">
						<li v-for="item in pagenum"
							:class="{ active: item == curr ? true: false }"
							@click="changeCurr(item)">
							{{ item }}</li>
					</ul>
					<div class="next">></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
		<script src="js/index.js"></script>
	</body>
</html>
